// src/App.vue
<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header"></header>
      <div class="content"></div>
    </div> -->
    <!-- 路由映射的对应的页面 ++++++++++++++++++++++++++++++++ -->
    <router-view></router-view>
    <!-- <footer class="footer"></footer> -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyFooter from './components/Footer.vue'
export default {
  components:{
    MyFooter
  }
}
</script>

<style lang="stylus">
html, body, .container 
  height 100%
html
  font-size 26.6666667vw

// 如何 判断当前是 横屏还是属性 
// 媒体查询  landscape 横屏   portrait 竖屏
@media (orientation landscape)
  html
    font-size 100px

body 
// 根据设计师设计的设计搞的最小的字体大小设置
  font-size 14px
.container
  display flex
  flex-direction column
  max-width 768px
  margin 0 auto
  box-shadow 0 0 30px #000
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      height 0.44rem
      background-color #f66
    .content
      flex 1
      overflow auto // 产生滚动条
      background-color #f6f6f6
  .footer
    height 0.5rem
    background-color #efefef
</style>
